<template>
    <div class="top">
        <img src="../../assets/img/头部.png" alt="">
    </div>
    <div class="dingdan-top-wrapper">
        <span>我的订单</span>
    </div>
    <div class="dingdan-content-wrapper">
        <div class="dingdan-content-top-wrapper" v-for="item in list" :key="id">
            <div class="dingdan-content-top">
                <span>{{ item.sj }}</span>
                <span>已取消</span>
            </div>
            <div class="dingdan-content-bottom">
                <div class="dingdan-content-bottom-left-wrapper">
                    <div class="dingdan-content-bottom-left" v-for="item in item.good">
                        <img :src="item.src" />
                    </div>
                </div>
                <div class="dingdan-content-bottom-right">
                    <span>¥{{ item.price }}</span>
                    <span>共{{ item.sum }}件</span>
                </div>
            </div>
        </div>

    </div>
    <div class="index-bottom">
        <div class="index-bottom-wrapper">
            <router-link :to="'/index'">
                <div class="index-bottom-cotent1">
                    <img src="@/assets/img/首页.png" alt="">
                    <span>首页</span>
                </div>
            </router-link>
            <div>
                <div class="index-bottom-cotent1">
                    <img src="@/assets/img/buy.png" alt="">
                    <span>购物车</span>
                </div>
            </div>
            <router-link :to="'/dingdan'">
                <div class="index-bottom-cotent">
                    <img src="@/assets/img/订单1.png" alt="">
                    <span>订单</span>
                </div>
            </router-link>
            <div class="index-bottom-cotent1">
                <img src="@/assets/img/我的.png" alt="">
                <span>我的</span>
            </div>
        </div>
    </div>
</template>

<script>
import { navData } from "@/untils/nav"
import "@/assets/css/index.css";
import "@/assets/css/dingdan.css";
import fq from "@/assets/img/番茄.png";
import tz from "@/assets/img/提子.png";
export default {
    setup() {
        const list = [
            {
                id: 1,
                sj: "沃尔玛",
                price: 66.69,
                sum: 6,
                good: [{ src: fq }, { src: tz }, { src: fq }, { src: tz }]
            },
            {
                id: 2,
                sj: "沃尔玛",
                price: 36.88,
                sum: 3,
                good: [{ src: fq }, { src: tz }]
            },
        ]
        return {
            navData,
            list
        }
    }
};
</script>